<template>
  <section class="test">
    <FtHeader />
    <div class="main">
      <iframe id="3dcharts" src="http://1.119.137.18:32006/libs/resafety/ppapi/3dMap.jsp" frameborder="0"></iframe>
      <div class="left-container">
        <template v-for="(item,index) in btnList">
            <div :class="{active:item.name == currentCoordName}" :key="index" @click="click_toFlyCoord(item)">{{item.name}}</div>
        </template>
      </div>
      <div class="right-container">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          :default-checked-keys="defaultCheckedList"
           @node-click="handleNodeClick"
           @check-change="handleCheckChange">
        </el-tree>
        <el-button @click="showText=''">clear</el-button>
        <div class="content" v-html="showText"></div>
      </div>
    </div>
  </section>
</template>

<script>
import FtHeader from '@src/components/5670/ft-header.vue'
import {treeData,defaultCheckedList} from '@src/json/city.js'
import mapService from '@src/utils/mapService'
export default {
    name: 'Test',
    components:{
      FtHeader,
    },
    data () {
      return {
        currentCoordName:'',
        btnList:[
          {
            name:'定位大梅沙',
            json:''
          },
          {
            name:'去黑幕',
            json:''
          },
          {
            name:'加载影像',
            json:''
          },
          {
            name:'测试点击回调',
            json:''
          },
          {
            name:'盐田区政府',
            json:''
          },
          {
            name:'棚户改造区',
            json:''
          },
          {
            name:'临港产业带',
            json:''
          },
        ],
        treeData:treeData.layers,
        defaultCheckedList:[],
        defaultProps: {
          children: 'layers',
          label: 'name'
        },
        showText:''
      }
        
    },
    created(){
      this.fillterChecked(treeData);
      window.cb_getAOIInfo=this.cb_getAOIInfo;
    },
    mounted(){
      mapService.getMessageData();
    },
    methods: {
      click_toFlyCoord(item){
        this.currentCoordName=item.name;
        this.$message(`${item.name}`);
        switch (item.name) {
          case '定位大梅沙':
            var msg = {
                "service_id": "camera.locate",
                "pos_pose": {
                    "x": "114.229943491",
                    "y": "22.555387526",
                    "z": "1444.3",
                    "alpha": "30",
                    "course": "10",
                    "roll": "1"
                },
                "time": "1000",
                "type": "1"
            };
            mapService.sendService(msg);	
            break;
          case '去黑幕':
            mapService.sendService({
              "external_switch_fla" : 1,
              "service_id" : "base_scene.set_externel_switch",
              "switch_distance" : 99999999
            });	
            break;
          case '加载影像':
            mapService.sendService({
              "max_show_height": 9999999999.0,
              "min_show_height": 1,
              "name": "shenzhen",
              "service_id": "web_map_accessor.add_layer"
            });	
            break;
          case '测试点击回调':
            mapService.sendService({
              "service_id": "effect.screen_image.create",
              "pos": {
                "x": 760,
                "y": 200
              },
              "align_type": 5,
              "offset": {
                "x": 0,
                "y": 0
              },
              "texture_path": "product_res//effect_res//picture//视频监控.png",
              "width": 100,
              "height": 100,
              "on_left_dbclick" : {
                "callback_data" : "$callback_data$",
                "function_name" : "cb_getAOIInfo",
                "page_title" : "",
                "service_id" : "page.call_function",
                "xxx":{"a":1}
              },
              "effect_id": "screen_picture1"
            });	
            break;
          default:
            break;
        }
      },
      cb_getAOIInfo(data){
        console.log('回调-',data);
      },
      handleNodeClick(data){
        console.log(data)
        this.$message(`点击了${data.name}`);
      },
      handleCheckChange(data, checked, indeterminate) {
        console.log(data)
        if(data.layers){
          return;
        }
        if(checked){
          console.log(`展现${data.url}的图层`);
          this.showText+=`<p>展现${data.url}的图层</p>`
        }else{
          console.log(`关闭${data.url}的图层`);
          this.showText+=`<p>关闭${data.url}的图层</p>`
        }
      },
      fillterChecked(treeData){
        for (let index = 0; index < treeData.layers.length; index++) {
          const element = treeData.layers[index];
          if(element.enable && element.type!=='folder'){this.defaultCheckedList.push(element.id)};
          if(element.layers){
            this.fillterChecked(element);
          }
        }
      }
    },
    computed:{
       
    },
}
</script>
<style scoped lang="less">
  .test{
    height: 100vh;
    padding-top: 88px;
    box-sizing: border-box;
    .main{
      height: 100%;
      width: 100%;
      position: relative;
      & iframe{
        width: 100%;
        height: 100%;
        border:none;
      }
      & .left-container{
        position: absolute;
        top:0;
        left: 0;
        height: 100%;
        width: 380px;
        background: rgba(0,0,0,.8);
        padding: 15px;
        box-sizing: border-box;
        &>div{
          color: #fff;
          background-color: #fff;
          text-align: center;
          height: 50px;
          line-height: 50px;
          color: #606266;
          border: 1px solid #dcdfe6;
          margin-bottom: 20px;
          border-radius: 6px;
          cursor: pointer;
          &.active{
            background-color: #409eff;
            color: #fff;
            translate: all 0.3s;
          }
        }
      }
      & .right-container{
        position: absolute;
        top:0;
        right: 0;
        height: 100%;
        width: 380px;
        background: rgba(0,0,0,.8);
        & .content{
          height: 300px;
          width: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          color: #fff;
          word-break:break-all;
        }
      }
    }
  }
</style>

